<template>
  <div class="head">
    <div class="city-name">
      <i class="iconfont icon-shuidi1"></i>
      {{ state.city }}
    </div>
    <div class="city-change">
      <i class="iconfont icon-24gf-city"></i>
      切换城市
    </div>
  </div>
  <div class="main">
    <div class="weather-info">
      <p class="temp">{{ state.weather.temperature }}℃</p>
      <p class="info">{{ state.weather.weather }}</p>
      <div class="detail">
        <div class="item">
          <i class="iconfont icon-shuidi1"></i>
          <span>湿度</span>
          <span>{{ state.weather.humidity }}%</span>
        </div>
        <div class="item">
          <i class="iconfont icon-feng"></i>
          <span>风向</span>
          <span>{{ state.weather.windDirection }}风</span>
        </div>
        <div class="item">
          <i class="iconfont icon-fengli"></i>
          <span>风力</span>
          <span>{{ state.weather.windPower }}级</span>
        </div>
      </div>
    </div>
    <div class="future-info" v-if="state.future.length">
      <div class="future-info-head">
        <span>三日天气预报</span>
      </div>
      <div class="future-info-main">
        <div class="future-info-weather" v-for="(item, index) in state.future" :key="index">
          <span>周{{ getFuturedate(item.week) }}</span>
          <i :class="[futureWeather[item.dayWeather]]"></i>
          <div>
            <p>{{ getFutureDayTemp(item) }}°</p>
            <p>/{{ getFutureNightTemp(item) }}°</p>
          </div>
        </div>
        <!-- <div class="future-info-weather">
          <span>周{{ getFuturedate(state.future[2].week) }}</span>
          <i :class="[futureWeather[state.future[2].dayWeather]]"></i>
          <div>
            <p>{{ getFutureDayTemp(state.future[2]) }}°</p>
            <p>/{{ getFutureNightTemp(state.future[2]) }}°</p>
          </div>
        </div>
        <div class="future-info-weather">
          <span>周{{ getFuturedate(state.future[3].week) }}</span>
          <i :class="[futureWeather[state.future[3].dayWeather]]"></i>
          <div>
            <p>{{ getFutureDayTemp(state.future[3]) }}°</p>
            <p>/{{ getFutureNightTemp(state.future[3]) }}°</p>
          </div>
        </div> -->
      </div>
    </div>
    <div class="container"></div>
  </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, reactive } from "vue";

const state = reactive({
  city: '北京市',
  weather: {},
  future: []
})

const futureWeather = {
  '晴': 'iconfont icon-qing',
  '多云': 'iconfont icon-duoyun',
  '阴天': 'iconfont icon-yintian',
  '大雨': 'iconfont icon-dayu',
  '小雨': 'iconfont icon-xiaoyu'
}

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "fc284d013f8ad446f918098e0f1cc075",
  };
  AMapLoader.load({
    key: "8d7745ccad751e91760e57eb708b0abc", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
  .then((AMap) => {
    // 获取定位
    getLocalCity(AMap)
  })
})


const getLocalCity = (AMap) => {
  AMap.plugin('AMap.CitySearch', function () {
  var citySearch = new AMap.CitySearch()
  citySearch.getLocalCity(function (status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // 查询成功，result即为当前所在城市信息
      state.city = result.city
      getWeather(AMap)
    }
  })
})
}

const getWeather = (AMap) => {
  //加载天气查询插件
AMap.plugin("AMap.Weather", function () {
  //创建天气查询实例
  var weather = new AMap.Weather();
  //执行实时天气信息查询
  weather.getLive(state.city, function (err, data) {
    //err 正确时返回 null
    //data 返回实时天气数据，返回数据见下表
    console.log(data);
    state.weather = data
    getFutureWeather(AMap)
  });
});
}


const getFutureWeather = (AMap) => {
  //加载天气查询插件
//加载天气查询插件
AMap.plugin("AMap.Weather", function () {
  //创建天气查询实例
  var weather = new AMap.Weather();
  //执行实时天气信息查询
  weather.getForecast(state.city, function (err, data) {
    console.log(data);
    for (let i = 1; i < data.forecasts.length; i++) {
      state.future.push(data.forecasts[i])
    }
    // state.future = data.forecasts
  });
});
}

function getFuturedate(key) {
  switch (key) {
    case '1':
      return '一'
    case '2':
      return '二' 
    case '3':
      return '三'
    case '4':
      return '四'
    case '5':
      return '五'
    case '6':
      return '六'
    case '7':
      return '天'
    default:
      break;
  }
}
function getFutureDayTemp(key) {
  return key.dayTemp
}
function getFutureNightTemp(key) {
  return key.nightTemp
}

</script>

<style lang="css" scoped>
.head{
  height: 53px;
  background-color: #8E6FF7;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}
.city-name{
  font-size: 18px;
}
.city-change{
  background-color: #fff;
  background: rgba(255,255,255,0.2);
  border-radius: 4px 4px 4px 4px;
  font-size: 14px;
  padding: 4px 12px;
}

.main{
  padding: 7px 16px 20px 16px;
}

.weather-info{
  width: 100%;
  background: linear-gradient( 146deg, rgba(142,111,247,0.1) 0%, rgba(142,111,247,0.05) 100%), rgba(0,0,0,0);
  border-radius: 16px 16px 16px 16px;
  padding: 24px;
  box-sizing: border-box;
}
.temp{
  font-family: Roboto, Roboto;
  font-weight: 300;
  font-size: 60px;
  color: #000000;
  line-height: 60px;
  text-align: center;
}
.info{
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: 14px;
  color: #4B5563;
  line-height: 21px;
  text-align: center;
}

.detail{
  display: flex;
  flex: 1;
  margin-top: 24px;
}
.item{
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}
.item i{
  color: #8E6FF7;
}
.item span:nth-child(2){
  font-size: 14px;
  color: rgb(102, 99, 102);
}
.item span:nth-child(3){
  font-size: 16px;
  color: #000000;
}

.future-info{
  width: 100%;
  margin-top: 24px;
}
.future-info-head{
  font-weight: 500;
  font-size: 18px;
  color: #000000;
  margin-bottom: 16px;
}
.future-info-main{
  display: flex;
  overflow-x: auto;
}
.future-info-weather{
  flex: 0 0 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16px;
  padding: 17px;
  background: #FFFFFF rgba(0,0,0,0.001);
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid #F3F4F6;
}
.future-info-weather span{
  margin-bottom: 8px;
  width: 100%;
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: 14px;
  color: #4B5563;
  text-align: left;
}
.future-info-weather i{
  width: 100%;
  margin: 8px 11px;
  font-size: 36px;
  text-align: center;
}
.future-info-weather div{
  display: flex;
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: 16px;
  color: #000000;
}
.future-info-weather div p:nth-child(2){
  font-size: 14px;
  color: #9CA3AF;
}

</style>